import { useEffect, useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import { Button, Tabs } from 'antd-mobile'
import { Image, List ,InfiniteScroll} from 'antd-mobile'
import axios from './api/axios'
import './App.css'
//函数组件
function App() {
  const [count, setCount] = useState(1)
   const [hasMore, setHasMore] = useState(true)
let [list,setList]=useState([])
let [pageCode,setpageCode]=useState(3)
//渲染列表
const getData=()=>{
axios.get('/api/list',{params:{pageCode:pageCode}}).then(res=>{
  console.log('res',res);
  const {data}=res.data.data
  if(res.data.code==10000){
    setList([...list,...data])
  }
  if(data.length==0){
    setHasMore(false)
  }
})
}
//调用
useEffect(()=>{
getData()
},[])
//利用set唯一性来去重排序
const addlist=(arr)=>[...new Set(arr)]
const arr=[4,4,1,1,1,2,2,2,2,3]
console.log(addlist(arr).sort());
const go=()=>{
  setCount((prev)=>prev+1)
}
const users = [
  {
    id: '1',
    avatar:
      'https://images.unsplash.com/photo-1548532928-b34e3be62fc6?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
    name: 'Novalee Spicer',
    description: 'Deserunt dolor ea eaque eos',
  },
  {
    id: '2',
    avatar:
      'https://images.unsplash.com/photo-1493666438817-866a91353ca9?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=b616b2c5b373a80ffc9636ba24f7a4a9',
    name: 'Sara Koivisto',
    description: 'Animi eius expedita, explicabo',
  },
  {
    id: '3',
    avatar:
      'https://images.unsplash.com/photo-1542624937-8d1e9f53c1b9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
    name: 'Marco Gregg',
    description: 'Ab animi cumque eveniet ex harum nam odio omnis',
  },
  {
    id: '4',
    avatar:
      'https://images.unsplash.com/photo-1546967191-fdfb13ed6b1e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
    name: 'Edith Koenig',
    description: 'Commodi earum exercitationem id numquam vitae',
  },
]
  return (
    <div>
      {/* 切换 */}
      <Tabs>
          <Tabs.Tab title='火车' key='fruits'>
            {/* 列表渲染跟使用 */}
            <List header='用户列表'>
      {list.map((item,ind) => (
        <List.Item
          key={ind}
          prefix={
            <Image
              src={item.shopImage}
              style={{ borderRadius: 20 }}
              fit='cover'
              width={40}
              height={40}
            />
          }
          description={item.shopDescription}
        >
          {item.shopName}
        </List.Item>
      ))}
    </List>
    <InfiniteScroll loadMore={getData} hasMore={hasMore} />
          </Tabs.Tab>
          <Tabs.Tab title='中转' key='vegetables'>
            <List header='用户列表'>
      {users.map(user => (
        <List.Item
          key={user.name}
          prefix={
            <Image
              src={user.avatar}
              style={{ borderRadius: 20 }}
              fit='cover'
              width={40}
              height={40}
            />
          }
          description={user.description}
        >
          {user.name}
        </List.Item>
      ))}
    </List>
          </Tabs.Tab>
          <Tabs.Tab title='递归' key='animals'>
            <p>数量{count}</p><Button onClick={()=>go()}>递归</Button>
          </Tabs.Tab>
        </Tabs>
    </div>
  )
}

export default App
